<template>
  <section class="card-container">
    <div class="card-header-container">
      <h3 class="card-header">
        <span class="title">{{ title }}</span>
        <span class="subtitle">{{ subtitle }}</span>
      </h3>

      <section class="pr-12">
        <slot name="options" />
      </section>
    </div>

    <slot />
  </section>
</template>

<script lang="ts" setup>
defineProps({
  title: {
    type: String,
    default: '',
  },
  subtitle: {
    type: String,
    default: '',
  },
});
</script>

<style lang='scss' scoped>
.card-container {
  box-sizing: border-box;
  padding: var(--#{$ns}-space-size-base);
  background-color: var(--#{$ns}-color-white);
  border-radius: 4px;

  .card-header-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .card-header {
      margin-left: var(--#{$ns}-space-size-mini);

      .title {
        font-size: var(--#{$ns}-font-size-base);
        font-weight: 600;
      }

      .subtitle {
        font-size: var(--#{$ns}-font-size-small);
        color: var(--#{$ns}-text-color-regular);
      }
    }

    &::before {
      position: absolute;
      left: 0;
      width: 4px;
      height: 14px;
      content: '';
      background: var(--#{$ns}-color-sub-primary);
      border-radius: 2px;
    }
  }
}
</style>
